<template>
    <div>
        <nav2 :pid="pid"></nav2>
        <div class="banner">
            <Banner></Banner>
         </div>
        <div class="container">
            <myleftNav style="float:left;width:20%" :navData="navData" ></myleftNav>
            <div class="right-list" style="float:left">
                <div class="new_list" v-for="(item,index) in items" :key="index">
                    <div class="left_img">
                        <a @click="goDetails(item.id)"><img src="../../assets/img/news.png"  alt=""></a>
                    </div>
                    <div class="right_info">
                        <p class="title"> <a @click="goDetails(item.id)">{{item.title}}</a></p>
                        <p class="article">
                            {{item.description}}
                            <a @click="goDetails(item.id)" style="margin-left:5px;" >详情</a>
                        </p>
                    </div>
                    <div class="clearfix"></div>
            </div>
            </div>
            <div class="clearfix"  ></div>
        </div>
        <div class="pagination">
            <pagination 
            :page-index="currentPage" 
            :totla="count" 
            :page-size="pageSize" 
            @change="pageChange"></pagination>
        </div>
        <div>
            <publicFooter></publicFooter>
        </div>
    </div>
</template>

<script>
import myleftNav from '@/components/leftNav'
import nav2 from '@/components/nav2'
import publicFooter from '@/components/publicFooter'
import Banner from '@/components/banner'
import navApi from '@/api/index/nav.js'
import pagination from '@/components/pagination'
    export default {
        name:'list',
        data () {
            return {
                pageSize : 3 , //每页显示20条数据
                currentPage : 1, //当前页码
                count : null, //总记录数
                items : null,
                children:null,
                navData:null,
                pid:null
            }
        },
        components:{
            myleftNav,
            nav2,
            publicFooter,
            Banner,
            pagination
        },
        created(){
            if(this.$route.query.pid){
                this.getChild(this.$route);
            }
            this.pid = this.$route.query.pid;
            this.getList(this.$route);
        },
        beforeRouteUpdate (to, from, next) {
            this.pid = to.query.pid;
            this.getChild(to);
            this.getDetailByUrl(to);
            this.getDetailById(to);
            this.getList(to);
            next();
        },
        methods:{
            getChild(to){//获取子菜单
                let fromData = {
                    id:to.query.pid
                }
                navApi.getNavChild(fromData).then(response=>{
                    this.navData = response;
                })
            },
            getList(to){ //获取列表
                let fromDate = {
                    url:to.query.url,
                    pageNum:this.currentPage,
                    pageSize:this.pageSize
                }
                navApi.getArticleList(fromDate).then(response=>{
                    this.items = response.list;
                    this.currentPage = response.pageNum;
                    this.pageSize = response.pageSize;
                    this.count = response.total;
                })
            },
            goDetails(articleId){   
                this.$router.replace({ path: '/details', query: { url: this.$route.query.url,pid:this.$route.query.pid,id:this.$route.query.id,articleId:articleId }})
            },
            pageChange (page) {
                this.currentPage = page            
            },
            getDetailByUrl(to){//获取详情  根据url
                if(to.query.url&&!to.query.articleId){
                    let fromData = {
                        url:to.query.url
                    }  
                    navApi.getArticleByUrl(fromData).then(response=>{
                        this.detailData = response;
                    })
                }
            },
            getDetailById(to){//获取详情  根据id
             if(to.query.articleId){
                    let fromData = {
                        id:to.query.articleId
                    }
                    navApi.getArticleById(fromData).then(response=>{
                        this.detailData = response;
                    })
                }
            }
        }
    }
</script>

<style scoped>
.container{
    width: 1200px;
    margin:0 auto;
}
.banner{
    margin-bottom:30px;
}
    .right-list .new_list{
        padding: 3px;
        margin-bottom: 20px;
        box-shadow: 0px 3px 4px 1px rgb(231, 229, 229);
    }
     .right-list .new_list .left_img{
        width: 160px;
        float: left;
        margin-right: 20px;
        overflow: hidden;
    } 
     .right-list .new_list .left_img img{
        width: 160px;
        transition: 1000ms;
    }
    .right-list .new_list .left_img a{
        display:block;
    }
     .right-list .new_list .left_img img:hover{
        transition: 1000ms;
        transform:scale(1.1);
    }
     .right-list .new_list .right_info{
        width: 700px;
        float: left;
    } 
     .right-list .new_list .right_info .title{
        text-align:left;
    }
     .right-list .new_list .right_info .title a{
        font-size: 14px;
        font-weight: bold;
        text-align:left;
        color:#000;
    }
     .right-list .new_list .right_info .article{
        font-size: 12px;
        text-align:left;
        color:#777;
        line-height: 20px;
    }
    .right-list .title{
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }
</style>